<template>
  <div class="details" v-if="data.detail">
    <!-- 购物车顶部 -->
    <van-nav-bar title="详情页">
      <template>
        <i slot="left" class="iconfont icon-zuojiantou"></i>
        <div slot="left" class="line"></div>
        <i slot="left" class="iconfont icon-home"></i>
      </template>
      <i slot="right" class="iconfont icon-fenxiang"></i>
    </van-nav-bar>
    <!-- 导航栏组件 -->
    <van-tabs scrollspy sticky>
      <van-tab title="商品">
        <!-- 轮播组件 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in data.detail.images" :key="index">
            <img
              :src="item.url+'?x-oss-process=style/watermark'"
              alt=""
            />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">1/4</div>
          </template>
        </van-swipe>
        <!-- 保障 -->
        <img
          src="https://img.wzj.com/modules/service-info-2.png?x-oss-process=style/w800-webp"
          alt=""
          class="block-img"
        />
        <!-- 标题 -->
        <div class="title p-30">
          <van-tag type="danger">热销</van-tag>
          <span>{{data.detail.name}}</span>
          <p>3mm进口岩板 奢华纹理</p>
          <h3>￥{{data.detail.prices[0].price}}</h3>
        </div>
        <!-- 规格尺寸 -->
        <div class="size">
          <span>未选</span>
          <span>请选择规格尺寸</span>
          <i class="iconfont icon-youjiantou"></i>
        </div>
        <!-- <Sku /> -->
      </van-tab>
      <van-tab title="评价">
        <!-- 最近体验店 -->
        <div class="shop" @click="toShop">
          <span>门店</span>
          <span>最近体验店</span>
          <i class="iconfont icon-youjiantou"></i>
        </div>
        <!-- 更多商品 -->
        <div class="moreproduct">
          <div class="top">
            <div class="left">
              <h2>Gusto Life系列</h2>
              <p>100人收藏</p>
            </div>
            <div class="right">
              <span>更多商品 ></span>
            </div>
          </div>
          <div class="bottom">
            <img
              src="https://pimg.wzj.com/wzj/product/spu/9fd52832-28d2-46c5-9bf0-2ef8a650017d.jpg?x-oss-process=style/w600-webp"
              alt=""
              v-for="(item, index) in 4"
              :key="index"
            />
          </div>
        </div>
        <!-- 家居顾问 -->
        <div class="consultant">
          <img
            src="https://img.wzj.com/modules/PIC3050957251106.png?x-oss-process=style/w800-webp"
            alt=""
          />
        </div>
      </van-tab>
      <van-tab title="详情">
        <!-- 商品基础信息 -->
        <div class="info">
          <h2>商品基础信息</h2>
          <div
            data-v-14d957f8=""
            class="pro-info"
            style="overflow: hidden; height: fit-content"
          >
            <p data-v-14d957f8="">
              <i data-v-14d957f8="" class="grey-dot"></i
              ><span data-v-14d957f8="">品牌</span
              ><span data-v-14d957f8="">我在家</span>
            </p>
            <p data-v-14d957f8="">
              <i data-v-14d957f8="" class="grey-dot"></i
              ><span data-v-14d957f8="">商品风格</span
              ><span data-v-14d957f8="">意式极简</span>
            </p>
            <p data-v-14d957f8="">
              <i data-v-14d957f8="" class="grey-dot"></i
              ><span data-v-14d957f8="">安装方式</span
              ><span data-v-14d957f8="">专业安装</span>
            </p>
            <p data-v-14d957f8="">
              <i data-v-14d957f8="" class="grey-dot"></i
              ><span data-v-14d957f8="">主材</span
              ><span data-v-14d957f8="">岩板</span>
            </p>
            <p data-v-14d957f8="">
              <i data-v-14d957f8="" class="grey-dot"></i
              ><span data-v-14d957f8="">产地</span
              ><span data-v-14d957f8="">中国广东</span>
            </p>
            <p data-v-14d957f8="">
              <i data-v-14d957f8="" class="grey-dot"></i
              ><span data-v-14d957f8="">交货期</span
              ><span data-v-14d957f8="">29天</span>
            </p>
            <p data-v-14d957f8="">
              <i data-v-14d957f8="" class="grey-dot"></i
              ><span data-v-14d957f8="">饰面材质</span
              ><span data-v-14d957f8="">无</span>
            </p>
          </div>
          <div class="showmore">
            <span>展开更多</span>
          </div>
        </div>
        <!-- 商品详情 -->
        <div class="pro-detail">
          <h2>商品详情</h2>
          <img
            v-for="(item,index) in data.detail.details_images"
            :key="index"
            :src="item.url+'?x-oss-process=style/w800-webp'"
            alt=""
          />
        </div>
      </van-tab>
    </van-tabs>

    <van-submit-bar button-text="加入购物车" @submit="handleAdd" />

  </div>
</template>

<script setup>
import { reactive } from '@vue/reactivity'
import { computed, onMounted } from '@vue/runtime-core'
import {useRoute,useRouter} from 'vue-router'
import {detailGet} from '@/api/goods'
import {useStore} from 'vuex'
let route = useRoute() // 替代this.$route
let store = useStore()
let router = useRouter()
// console.log(route.query);
let {id} = route.query
//以id为条件请求详情数据
let data = reactive({
  detail:null
})
onMounted(()=>{
  detailGet(id).then(res=>{
    console.log(res);
    data.detail = res.data.results[0]
  })
})

let userInfo = computed(()=>{
  return store.state.user.userInfo
})

let handleAdd = ()=>{
  console.log(userInfo);
  if(!userInfo.value){  //登录判断
    router.push('/login?target=/detail')
    return
  }
  let {id,name,prices,subtitle,image_url} = data.detail
  store.dispatch('cart/cartAddAct',{
    name,prices,subtitle,image_url,
    count:1,
    ischeck:true,
    userid:userInfo.value._id, //用户id
    goodid:id  //商品id
  })
}
</script>

<style lang="less" scoped>
.block-img{
  width: 100%;
}
.custom-indicator {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  padding: 0.3rem 2rem;
  font-size: 1.4rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2.5rem;
}

.details {
  background: #efefef;
  padding-bottom: 10rem;
}
// 导航栏样式
/deep/.van-nav-bar__left {
  align-items: center;
}
/deep/.van-swipe-item {
  height: 75rem;
  overflow: hidden;
  img {
    width: 75rem;
  }
}
.icon-fenxiang {
  font-size: 5rem;
  color: #222121;
}
.icon-zuojiantou {
  font-size: 3.8rem;
}
.icon-home {
  padding-left: 2.6rem;
  font-size: 4rem;
  font-weight: bold;
}
.line {
  height: 4rem;
  width: 0.2rem;
  background: #222121;
  margin-left: 2rem;
}
// 标题样式
.van-tag {
  padding: 0.5rem 1rem !important;
}
.van-tag--danger {
  background: #be4c4b !important;
}
.title {
  background: #fff;
  padding-bottom: 2rem;
  > span:nth-of-type(1) {
    font-size: 3rem;
    font-weight: bold;
  }
  > span:nth-of-type(2) {
    font-size: 4rem;
    margin-left: 1rem;
  }
  > p {
    font-size: 2.5rem;
    color: #a28a7d;
    margin-top: 1rem;
  }
  > h3 {
    font-size: 5rem;
    margin-top: 1.5rem;
    color: #be4c4b;
    font-family: HelveticaNeue-Medium;
  }
}

// 规格尺寸样式
.size {
  background: #fff;
  margin-top: 2rem;
  height: 10rem;
  display: flex;
  align-items: center;
  padding-left: 3.5rem;
  padding-right: 3rem;
  span {
    margin-right: 4rem;
    font-size: 2.5rem;
  }
  i {
    margin-left: auto;
  }
}

// 最近体验店样式
.shop {
  background: #fff;
  margin-top: 2rem;
  height: 10rem;
  display: flex;
  align-items: center;
  padding-left: 3.5rem;
  padding-right: 3rem;
  span {
    margin-right: 4rem;
    font-size: 2.5rem;
  }
  i {
    margin-left: auto;
  }
}

// 更多商品
.moreproduct {
  background: #fff;
  margin-top: 2rem;
  height: 32rem;
  padding: 2rem 3rem 0;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      h2 {
        font-size: 3.6rem;
      }
      p {
        color: #a28a7d;
        font-size: 2.4rem;
      }
    }
    .right {
      span {
        color: #be4c4b;
        font-size: 2.4rem;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    img {
      width: 16rem;
      border-radius: 0.8rem;
    }
  }
}

// 家居顾问
.consultant {
  margin-top: 2rem;
  img{
    width: 100%;
  }
}

// 商品基础信息
.info {
  padding: 3rem 3rem 0;
  background: #fff;
  margin-top: 2rem;
  h2 {
    font-size: 3.6rem;
  }
  .pro-info {
    margin-top: 4rem;
    height: 14rem;
    overflow: hidden;
    p {
      display: flex;
      align-items: center;
      margin-bottom: 3rem;
      i {
        width: 1rem;
        height: 1rem;
        background: #b1b1b1;
        border-radius: 50%;
        margin-right: 2rem;
      }
      span {
        font-size: 2.8rem;
        width: 15.2rem;
        font-family: Helvetica, SimHei;
      }
    }
  }
  .showmore {
    height: 10rem;
    line-height: 10rem;
    text-align: center;
    font-size: 2.8rem;
    font-family: Helvetica, SimHei;
    color: #7d7d7d;
    position: relative;
    &:after {
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: -15px;
      right: -15px;
      z-index: 2;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e6e6e6;
    }
  }
}

// 商品详情
.pro-detail {
  padding: 3rem 0 0 0;
  background: #fff;
  margin-top: 2rem;
  h2 {
    font-size: 3.6rem;
    padding-left: 3rem;
  }
  img{
    width: 100%;
  }
}

// 推荐
.recommend {
  padding: 2rem 1rem 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
}

// 底部样式
/deep/.van-goods-action-icon:nth-of-type(2) {
  i {
    font-size: 3.6rem;
  }
  i:nth-of-type(2) {
    font-size: 3.6rem;
  }
}

/deep/.van-goods-action-button--danger {
  background: #be4c4b;
}

/deep/.van-goods-action-icon__icon {
  color: #be4c4b;
}
</style>
